Skip to content

[RTE] PlateElement/PlateLeaf rendering and todo/iframe migration alignment#3069

Open
cpoftea wants to merge 2 commits intoepam:developfrom
cpoftea:plate-elements
Open

[RTE] PlateElement/PlateLeaf rendering and todo/iframe migration alignment#3069
cpoftea wants to merge 2 commits intoepam:developfrom
cpoftea:plate-elements

Conversation

@cpoftea
Copy link
Copy Markdown
Collaborator

@cpoftea cpoftea commented Mar 23, 2026

  • Rendering (PlateElement / PlateLeaf)

    • Headings and default paragraph use PlateElement; bold/code/italic/superscript/underline use PlateLeaf with as
    • Attachment, iframe, placeholder blocks, quote, link anchor, list LI, paragraph override, Note block, and Separator refactored to PlateElement / useElement; Separator simplified (no forwardRef, contentEditable false on element)
    • Base marks: nested span wrappers replaced with PlateLeaf; inline code uses PlateLeaf + PlateLeafProps
    • ToDoItem wrapped in PlateElement with asChild around FlexRow for correct Slate attributes
    • Added types.ts (e.g. TPlaceholderElement) for typed placeholder inserts
  • Todo list migration

    • checked moved from data to element root; ToDoItem reads/toggles there
    • Legacy helpers: DeprecatedTTodoListItemElement, isLegacyTodoListItemElement, migrateCheckedPropertyIfNeeded
    • withTodoList + normalizeTodoListElement registered on the plugin
  • Iframe migration

    • normalizeIframeElement sets url from url or legacy data.src; keeps other data without src
    • IframeBlock uses element.url only (no element.src fallback)
    • withIframe extracts normalize wiring from the iframe plugin

Description:

Aligns the Plate-based editor with Plate’s element/leaf primitives and tightens legacy Slate data migration for todo items and iframes.

Issue link: #3062

@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 23, 2026

Generated by: track-bundle-size
Generated at: Mon, 23 Mar 2026 13:52:24 GMT
Bundle size diff (in kBytes). Not gzipped. Both CSS & JS included.
Baseline: v6.3.1 (2025-12-03)
CI Status: ok

Module Baseline Size
(v6.3.1)
Size Diff Within
Threshold
Threshold
(min - max)
templateApp 693.09 682.47 -10.61
js:-6.9
css:-3.71
🆗 623.78 - 762.39
@epam/app 5586.96 5539.42 -47.53
js:-46.54
css:-0.99
🆗 5028.26 - 6145.65
@epam/electric 5.04 5.04 0
js:0
css:0
🆗 4.53 - 5.54
@epam/promo 55.61 55.57 -0.05
js:0
css:-0.05
🆗 50.05 - 61.17
@epam/uui-extra 0.21 0.21 0
js:0
css:0
🆗 0.19 - 0.23
@epam/loveship 92.81 96.26 +3.45
js:+3.48
css:-0.03
🆗 83.53 - 102.09
@epam/uui-components 257.49 258.97 +1.47
js:+0.49
css:+0.99
🆗 231.75 - 283.25
@epam/uui-core 324.75 329.08 +4.33
js:+4.33
css:0
🆗 292.27 - 357.23
@epam/uui-db 41.63 41.72 +0.08
js:+0.08
css:0
🆗 37.47 - 45.8
@epam/uui-docs 181.03 194.74 +13.71
js:+13.72
css:0
🆗 162.92 - 199.13
@epam/uui-editor 174.1 174.39 +0.28
js:+0.29
css:0
🆗 156.69 - 191.51
@epam/uui-timeline 75.5 75.5 +0
js:0
css:+0
🆗 67.95 - 83.05
@epam/uui 527.51 545.62 +18.12
js:+2.42
css:+15.69
🆗 474.76 - 580.26
new sizes (raw)

To set the sizes as a new baseline, you can copy/paste next content to the uui-build/config/bundleSizeBaseLine.json and commit the file.

{
  "version": "6.4.3",
  "timestamp": "2026-03-23",
  "sizes": {
    "templateApp": {
      "css": 253670,
      "js": 445182
    },
    "@epam/app": {
      "css": 719497,
      "js": 4952877
    },
    "@epam/electric": {
      "css": 2275,
      "js": 2883
    },
    "@epam/promo": {
      "css": 47756,
      "js": 9145
    },
    "@epam/uui-extra": {
      "css": 0,
      "js": 213
    },
    "@epam/loveship": {
      "css": 55348,
      "js": 43224
    },
    "@epam/uui-components": {
      "css": 24608,
      "js": 240575
    },
    "@epam/uui-core": {
      "css": 0,
      "js": 336983
    },
    "@epam/uui-db": {
      "css": 0,
      "js": 42718
    },
    "@epam/uui-docs": {
      "css": 2152,
      "js": 197259
    },
    "@epam/uui-editor": {
      "css": 12952,
      "js": 165618
    },
    "@epam/uui-timeline": {
      "css": 2203,
      "js": 75109
    },
    "@epam/uui": {
      "css": 214809,
      "js": 343912
    }
  }
}

Generated by: generate-components-api
CI Status: ok

Total amount of exported types/props without JSDoc comments

Amount
Types 335 (+0) 🆗
Props 220 (+0) 🆗

@cpoftea cpoftea changed the title [RTE] PlateElement / PlateLeaf for default and plugin nodes [RTE] PlateElement/PlateLeaf rendering and todo/iframe migration alignment Mar 23, 2026
* Switched headings and default paragraph to `PlateElement` with `as`, and bold/code/italic/superscript/underline to `PlateLeaf` with `as`
* Refactored `AttachmentBlock`, `IframeBlock`, and `PlaceholderBlock` to `PlateElement` with `PlateElementProps` / `useElement` instead of manual `attributes` / `element` typing
* Updated `quotePlugin` quote renderer, `linkPlugin` anchor override, `listPlugin` `LI` component, `paragraphPlugin` default paragraph override, `NotePluginBlock`, and `Separator` to use `PlateElement` (merged `className` / styles where needed; `Separator` no longer uses `forwardRef` and applies `contentEditable={ false }` on the element)
* Replaced nested span wrappers in `baseMarksPlugin` (bold/italic/underline) with `PlateLeaf`
* Replaced inline code span in `inlineCodePlugin` with `PlateLeaf` and `PlateLeafProps`
* Wrapped `ToDoItem` in `PlateElement` with `asChild` around `FlexRow` so Slate attributes compose with the layout row
* Added `types.ts` with `TPlaceholderElement` and used `satisfies` when inserting placeholder nodes
* Todo list plugin:
  * Moved `checked` from `data` to the element root for todo items; updated `ToDoItem` to read and toggle `checked` there
  * Added `DeprecatedTTodoListItemElement`, `isLegacyTodoListItemElement`, and `migrateCheckedPropertyIfNeeded` to lift legacy `data.checked` onto the node
  * Added `withTodoList` and `normalizeTodoListElement` and registered them on the todo list plugin
* Iframe plugin:
  * Updated `normalizeIframeElement` to set `url` from `url` or legacy `data.src` and to persist remaining `data` without `src`
  * Stopped falling back to `element.src` in `IframeBlock`; rendering uses `element.url` only
  * Extracted iframe `normalizeNode` wiring into `withIframe` and used it from the iframe plugin
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant